// 1. 创建实例
var data = { 
    name: 'gavin',
    website:'https://v2.cn.vuejs.org/v2/guide/instance.html',
    websiteTag:'<a href="https://v2.cn.vuejs.org/v2/guide/instance.html">v-html 数据绑定</a>',
    age: 20,
    a:0,
    b:0,
    avaliable: true,
    error: false,
    success: false,
    cities:['NanJing','Beijing','Shanghai','Guangzhou'],
    students:[{name:'gavin',age:10},{name:'二狗',age:11},{name:'大牛',age:9},],
    output:"your fav food",


}

Vue.component('greeting',{
    template:"<p>this is re-usable conponent</p>",
    data:function(){
        return {
            name: 'Gavin'
        }
    },
    methods:{
        changeName:function(){
            this.name = 'Daniel'
        }
    }
})


var vue = new Vue({
  el: '#vue-app',
  data: data,
  methods:{
    greet: function(time){
        return  'hello ' +time+ ' '+this.name
    },
    addYear:function(inc){
        this.age +=  inc
    },
    subYear:function(inc){
        this.age -= inc
    },
    click:function(){
        alert('you clicked me')
    },
    logName:function(){
        console.log("you input name")
    },
    logAge:function(){
        console.log("you input age")
    },
    addToA:function(){
        return this.age + this.a
    },
    addToB:function(){
        return this.age + this.b
    },
    readRefs:function(){
        console.log(this.$refs)
        this.output=this.$refs.input.value
    },

  }
})

var vue2 = new Vue({
    el: '#vue-app2',
    data: data,
    methods:{
        changeName:function(){
            vue.name = 'changed from vue2 instance'
        }
    }

})

// changed from outside
vue.name = "Vue2"